<div id="" class="field formio-component formio-component-form  formio-component-label-hidden" ref="component">
  <div class="formio-form ui form" ref="webform" novalidate>
    <div id="page1" class="field formio-component formio-component-panel formio-component-page1 " ref="component">
      <h4 class="ui top attached block header " ref="header">
        Layouts
      </h4>
      <div class="ui bottom attached segment" ref="nested-page1">
        <div id="html" class="field formio-component formio-component-htmlelement formio-component-html " ref="component">
          <p class="formio-component-htmlelement " ref="html">Required validation should trigger inside all layout sets</p>
          <div ref="messageContainer"></div>
        </div>
        <div id="panel1" class="field formio-component formio-component-panel formio-component-panel1 " ref="component">
          <h4 class="ui top attached block header " ref="header">
            Panel
          </h4>
          <div class="ui bottom attached segment" ref="nested-panel1">
            <div id="textField" class="field form-group has-feedback formio-component formio-component-textfield formio-component-textField  required" ref="component">
              <label class=" field-required" for="textField-textField">
                Text Field - Panel
              </label>
              <div ref="element">
                <div class="ui input fluid ">
                  <input ref="input" name="data[textField]" type="text" class="form-control" lang="en" spellcheck="true" value="" id="textField-textField"></input>
                </div>
              </div>
              <div ref="messageContainer"></div>
            </div>
            <div id="number" class="field form-group has-feedback formio-component formio-component-number formio-component-number  required" ref="component">
              <label class=" field-required" for="number-number">
                Number
              </label>
              <div ref="element">
                <div class="ui input fluid ">
                  <input ref="input" name="data[number]" type="text" class="form-control" lang="en" inputmode="decimal" value="" id="number-number"></input>
                </div>
              </div>
              <div ref="messageContainer"></div>
            </div>
            <div id="columns" class="field row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
              <div class="ui grid" style="width: 100%">
                <div class="six wide column" ref="column-columns">
                  <div id="selectColumn" class="field form-group has-feedback formio-component formio-component-select formio-component-selectColumn  required" ref="component">
                    <label class=" field-required" for="selectColumn-selectColumn">
                      Select - Column
                    </label>
                    <select ref="selectContainer" class="ui search dropdown" name="data[selectColumn]" type="text" class="form-control" lang="en" id="selectColumn-selectColumn"></select>
                    <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" />
                    <div ref="messageContainer"></div>
                  </div>
                </div>
                <div class="six wide column" ref="column-columns">
                  <div id="checkboxColumn" class="field form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                    <div class="ui checkbox">
                      <input ref="input" id="checkboxColumn" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0">
                      </input>
                      <label class=" field-required" for="checkboxColumn">
                        <span>Checkbox - Column</span>
                      </label>
                    </div>
                    <div ref="messageContainer"></div>
                  </div>
                </div>
              </div>
              <div ref="messageContainer"></div>
            </div>
          </div>
          <div ref="messageContainer"></div>
        </div>
        <div id="fi" class="field form-group formio-component formio-component-fieldset formio-component-fi " ref="component">
          <fieldset>
            <legend ref="header" class="">
              FieldSet
            </legend>
            <div class="card-body" ref="nested-fi">
              <div id="radioFieldSet" class="field form-group has-feedback formio-component formio-component-radio formio-component-radioFieldSet  required" ref="component">
                <label class=" field-required" for="radioFieldSet-radioFieldSet">
                  Radio - Field Set
                </label>
                <div class="fields grouped">
                  <div class="field">
                    <div class="ui radio checkbox" ref="wrapper">
                      <input ref="input" name="data[radioFieldSet][-radioFieldSet]" type="radio" class="form-check-input" lang="en" value="a" id="-radioFieldSet--a">
                      <label class="" for="-radioFieldSet--a">
                        <span>a</span>
                      </label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui radio checkbox" ref="wrapper">
                      <input ref="input" name="data[radioFieldSet][-radioFieldSet]" type="radio" class="form-check-input" lang="en" value="b" id="-radioFieldSet--b">
                      <label class="" for="-radioFieldSet--b">
                        <span>b</span>
                      </label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui radio checkbox" ref="wrapper">
                      <input ref="input" name="data[radioFieldSet][-radioFieldSet]" type="radio" class="form-check-input" lang="en" value="c" id="-radioFieldSet--c">
                      <label class="" for="-radioFieldSet--c">
                        <span>c</span>
                      </label>
                    </div>
                  </div>
                </div>
                <div ref="messageContainer"></div>
              </div>
              <div id="phoneNumberFieldset" class="field form-group has-feedback formio-component formio-component-phoneNumber formio-component-phoneNumberFieldset  required" ref="component">
                <label class=" field-required" for="phoneNumberFieldset-phoneNumberFieldset">
                  Phone Number - Fieldset
                </label>
                <div ref="element">
                  <div class="ui input fluid ">
                    <input ref="input" name="data[phoneNumberFieldset]" type="text" class="form-control" lang="en" inputmode="decimal" spellcheck="true" value="" id="phoneNumberFieldset-phoneNumberFieldset"></input>
                  </div>
                </div>
                <div ref="messageContainer"></div>
              </div>
              <div id="table" class="field table-responsive formio-component formio-component-table formio-component-table  no-top-border-table" ref="component">
                <table class="ui table
    padded
  ">
                  <tbody>
                    <tr ref="row-table">
                      <td ref="table-table-" class="cell-align-left">
                        <div id="dateTime" class="field form-group has-feedback formio-component formio-component-datetime formio-component-dateTime  required" ref="component">
                          <label class=" field-required" for="dateTime-dateTime">
                            Date / Time
                          </label>
                          <div ref="element">
                            <div class="ui input fluid  right labeled">
                              <input ref="input" name="data[dateTime]" type="text" class="form-control" lang="en" value="" id="dateTime-dateTime"></input>
                              <div class="ui label" ref="suffix">
                                <i ref="icon" class="fa fa-calendar" style=""></i>
                              </div>
                            </div>
                          </div>
                          <div ref="messageContainer"></div>
                        </div>
                      </td>
                      <td ref="table-table-" class="cell-align-left">
                        <div id="dayTable" class="field form-group has-feedback formio-component formio-component-day formio-component-dayTable " ref="component">
                          <label class="" for="dayTable-dayTable">
                            Day - Table
                          </label>
                          <div class="ui grid">
                            <div class="five wide column">
                              <label for="dayTable-month" class="">Month</label>
                              <select ref="month" class="ui search dropdown" id="dayTable-month" class="form-control" name="month" lang="en">
                                <option value=''>
                                </option>
                                <option value='1'>
                                  January
                                </option>
                                <option value='2'>
                                  February
                                </option>
                                <option value='3'>
                                  March
                                </option>
                                <option value='4'>
                                  April
                                </option>
                                <option value='5'>
                                  May
                                </option>
                                <option value='6'>
                                  June
                                </option>
                                <option value='7'>
                                  July
                                </option>
                                <option value='8'>
                                  August
                                </option>
                                <option value='9'>
                                  September
                                </option>
                                <option value='10'>
                                  October
                                </option>
                                <option value='11'>
                                  November
                                </option>
                                <option value='12'>
                                  December
                                </option>
                              </select>
                              <input type="text" class="formio-select-autocomplete-input" ref="autocompleteInput" tabindex="-1" />
                            </div>
                            <div class="four wide column">
                              <label for="dayTable-day" class="">Day</label>
                              <div class="ui input fluid ">
                                <input ref="day" id="dayTable-day" class="form-control formio-day-component-day" type="number" placeholder="" step="1" min="1" max="31" id="dayTable-dayTable"></input>
                              </div>
                            </div>
                            <div class="seven wide column">
                              <label for="dayTable-year" class="">Year</label>
                              <div class="ui input fluid ">
                                <input ref="year" id="dayTable-year" class="form-control formio-day-component-year" type="number" placeholder="" step="1" min="1900" max="2030" id="dayTable-dayTable"></input>
                              </div>
                            </div>
                          </div>
                          <input name="data[day]" type="hidden" class="form-control" lang="en" value="" ref="input">
                          <div ref="messageContainer"></div>
                        </div>
                      </td>
                    </tr>
                    <tr ref="row-table">
                      <td ref="table-table-" class="cell-align-left">
                        <div id="currencyTable" class="field form-group has-feedback formio-component formio-component-currency formio-component-currencyTable  required" ref="component">
                          <label class=" field-required" for="currencyTable-currencyTable">
                            Currency - Table
                          </label>
                          <div ref="element">
                            <div class="ui input fluid ">
                              <input ref="input" name="data[currencyTable]" type="text" class="form-control" lang="en" inputmode="decimal" value="" id="currencyTable-currencyTable"></input>
                            </div>
                          </div>
                          <div ref="messageContainer"></div>
                        </div>
                      </td>
                      <td ref="table-table-" class="cell-align-left">
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div ref="messageContainer"></div>
              </div>
            </div>
          </fieldset>
          <div ref="messageContainer"></div>
        </div>
        <div id="well1" class="field " ref="component">
          <div class="ui secondary segment">
            <div class="content" ref="nested-well1">
              <div id="emailWell" class="field form-group has-feedback formio-component formio-component-email formio-component-emailWell  required" ref="component">
                <label class=" field-required" for="emailWell-emailWell">
                  Email - Well
                </label>
                <div ref="element">
                  <div class="ui input fluid ">
                    <input ref="input" name="data[emailWell]" type="email" class="form-control" lang="en" spellcheck="true" value="" id="emailWell-emailWell"></input>
                  </div>
                </div>
                <div ref="messageContainer"></div>
              </div>
              <div id="addressWell" class="field form-group has-feedback formio-component formio-component-address formio-component-addressWell  required" ref="component">
                <label class=" field-required" for="addressWell-addressWell">
                  Address - Well
                </label>
                <div class="address-autocomplete-container">
                  <input ref="searchInput" name="data[addressWell]" type="text" class="form-control" lang="en" tabindex="0" value="" autocomplete="off" aria-label="autocomplete">
                  <i class="address-autocomplete-remove-value-icon fa fa-times" tabindex="0" ref="removeValueIcon"></i>
                </div>
                <div ref="messageContainer"></div>
              </div>
            </div>
          </div>
          <div ref="messageContainer"></div>
        </div>
      </div>
      <div ref="messageContainer"></div>
    </div>
    <div id="submit" class="field form-group has-feedback formio-component formio-component-button formio-component-submit  form-group" ref="component">
      <button ref="button" class="ui button primary " name="data[submit]" type="submit" class="btn btn-primary btn-md" lang="en">
        Submit
      </button>
      <div ref="buttonMessageContainer">
        <span class="help-block" ref="buttonMessage"></span>
      </div>
      <div ref="messageContainer"></div>
    </div>
  </div>
  <div ref="messageContainer"></div>
</div>